<script setup>
import topNav from "../../components/topNav.vue";
import { introApi } from "@/services/index";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
// import topNav from "../../components/topNav.vue";
import { operation } from "@/utils/num.js";
import {
  appScTransferDetail,
  appEmployeeSelector,
  returnCreate,
} from "@/services/transfer";

const id = ref("");
const userObj = ref({});
onLoad((e) => {
  id.value = e.id;
  getAppScTransferDetail();
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));

    targetShopId.value = userObj.value.shopId;
  }
});

const optionDet = ref({});
const payPrice = ref(0);
const payNum = ref(0);
const payLen = ref(0);
const openList = ref([]);
const targetShopId = ref("");
const selectid = ref("");
const selectName = ref("");
const returnEmployeeId = ref("");

const getAppScTransferDetail = async () => {
  try {
    let res = await appScTransferDetail({ id: id.value });
    let num = 0;
    let price = 0;
    let index = 0;
    let arr = [];
    res.data.details.forEach((item, index2) => {
      item.maxNum = item.receiveNum - item.returnNum;
      item.transferNum = item.receiveNum - item.returnNum;
      if (item.receiveNum - item.returnNum > 0) {
        num = num + item.receiveNum - item.returnNum;
        price = operation(
          price,
          operation(
            item.receiveNum - item.returnNum,
            item.taxPrice,
            2,
            "multiply"
          ),
          2,
          "add"
        );
        if (item.transferNum > 0) {
          index = index + item.receiveNum - item.returnNum;
        }
        arr.push(item);
      } else {
      }
    });
    res.data.details = arr;
    optionDet.value = res.data;

    payPrice.value = price;
    payNum.value = num;
    payLen.value = index;
    // targetShopId.value = res.data.sourceScId;
    getAppEmployeeSelector();
  } catch (e) {}
};
const getAppEmployeeSelector = async () => {
  let res = await appEmployeeSelector({
    shopId: targetShopId.value,
  });
  openList.value = res.data.datas;
};
const valChange = (e) => {
  // optionDet.value.details.forEach((element) => {});
  let num = 0;
  let price = 0;
  let index = 0;

  setTimeout(() => {
    optionDet.value.details.forEach((item) => {
      num = num + item.transferNum;
      price = operation(
        price,
        operation(item.transferNum, item.taxPrice, 2, "multiply"),
        2,
        "add"
      );
      if (item.transferNum > 0) {
        index = index + 1;
      }
    });
    payPrice.value = price;
    payNum.value = num;
    payLen.value = index;
  }, 100);
  console.log(num, price);
};

const showInShop = ref(false);
const selectItem = ref({});
const shopSelect = (e) => {
  console.log(e);
  selectid.value = e.id;
  selectItem.value = e;
};
const selectTo = () => {
  selectName.value = selectItem.value.name;
  returnEmployeeId.value = selectItem.value.id;
  showInShop.value = false;
};

const isPay = ref(false);

const goPay = async () => {
  if (returnEmployeeId.value == "") {
    uni.showToast({
      title: "请选择退货人",
      icon: "none",
    });
    return;
  }
  if (payNum.value == 0) {
    uni.showToast({
      title: "请选择退货商品",
      icon: "none",
    });
    return;
  }
  if (isPay.value == true) {
    return;
  }
  isPay.value = true;
  let data = [];
  optionDet.value.details.forEach((item) => {
    if (item.transferNum > 0) {
      data.push({
        productId: item.productId,
        returnNum: item.transferNum,
      });
    }
  });

  console.log(data);

  try {
    let res = await returnCreate({
      transferOrderId: id.value,
      returnEmployeeId: returnEmployeeId.value,
      products: data,
    });
    if (res.code == 200) {
      isPay.value = false;

      uni.hideLoading();
      uni.showToast({
        title: "提交成功",
        icon: "success",
        mask: true,
      });
      uni.navigateBack();

      // uni.redirectTo({
      //   url:
      //     "/pages/transfer/paystate/index?id=" +
      //     res.data.id +
      //     "&price=" +
      //     payPrice.value +
      //     "&payNum=" +
      //     payNum.value +
      //     "&upPrice=" +
      //     upPrice,
      // });

      // let resData = res.data.datas;
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none",
        mask: true,
      });

      isPay.value = false;
    }
  } catch (e) {
    isPay.value = false;
    uni.showToast({
      title: e.msg,
      icon: "none",
    });
  }
};
//无网状态
const connected = () => {
  getAppScTransferDetail();
};
</script>

<template>
  <view class="bg">
    <topNav
      :title="'退货申请'"
      @save="saveFun"
      :border="true"
      rType="save"
    ></topNav>

    <view class="content">
      <view class="content_info">
        <view class="content_info_index">
          <text class="content_info_index_text">调货单</text>
          <text class="nun">{{ optionDet.id }}</text>
        </view>
        <view class="content_info_index" @click="showInShop = true">
          <text class="content_info_index_text"
            >退货人<text class="xz_red">*</text></text
          >
          <view class="nun"
            ><text :class="!selectName ? 'noselect' : ''"
              >{{ selectName ? selectName : "请选择" }}
            </text>
            <up-icon name="arrow-right" color="#C9CDD4" size="40rpx"></up-icon
          ></view>
        </view>
      </view>
    </view>

    <view class="content-output"> 请选择退货商品： </view>

    <view
      class="content-item"
      v-for="(item, index) in optionDet.details"
      :key="index"
    >
      <view class="content-item-left"
        ><image :src="item.image" mode="scaleToFill"
      /></view>
      <view class="content-item-right">
        <view class="content-item-right-title">
          <text>{{ item.productName }}</text>
        </view>
        <view class="content-item-right-index">
          <view>
            <view class="content-item-right-num">
              <view class="content-item-right-num-left"
                ><text>{{ item.categoryName }}</text>
              </view>
            </view>
            <!-- @click="priceClick(item, index, 1)" -->
            <view class="content-item-right-price"
              ><text>¥</text> {{ item.taxPrice }}</view
            ></view
          >
          <view class="content-item-right-num-right">
            <up-number-box
              v-model="item.transferNum"
              @change="valChange"
              min="0"
              :max="item.receiveNum - item.returnNum"
            ></up-number-box>
          </view>
        </view>
      </view>
    </view>

    <view style="width: 100%; height: 150rpx"></view>
  </view>

  <view class="bt_form">
    <view class="bt_form_k">
      <view class="bt_form_k_left">
        <view class="price"
          ><text class="price-text">调货总价</text> <text>¥</text
          >{{ payPrice }}
          <view class="price-num">共{{ payLen }}款, {{ payNum }}件</view></view
        >
      </view>
      <view class="bt_pay" @click="goPay">确定退货</view>
    </view>
  </view>

  <up-popup
    v-model:show="showInShop"
    round="10"
    @close="showInShop = false"
    :safeAreaInsetBottom="true"
    :closeable="true"
  >
    <view class="popup-content">
      <view class="popup-content-title">
        <text>{{ "请选择退货人" }}</text>
      </view>
      <view class="popup-content-list">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view
            class="scroll-to"
            v-for="(item, index) in openList"
            :key="index"
            @click="shopSelect(item, 1)"
          >
            <view
              class="scroll-to-title"
              :class="item.id == selectid ? 'scroll-to-title-sel' : ''"
            >
              <text>{{ item.name }}</text>
            </view>
            <up-icon
              v-if="item.id == selectid"
              name="checkbox-mark"
              color="#1679FB"
              size="40rpx"
            ></up-icon>
          </view>

          <view
            style="padding: 50rpx 0 50rpx 0; text-align: center; color: #adadad"
            class="scroll-to-content"
            v-if="openList.length == 0"
          >
            暂无数据
          </view>
        </scroll-view>
      </view>
      <view class="popup-content-btn">
        <up-button
          class="bt-qx"
          type="default"
          :plain="true"
          text="取消"
          @click="showInShop = false"
        ></up-button>
        <up-button type="primary" @click="selectTo()" text="确定"></up-button>
      </view>
    </view>
  </up-popup>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
